<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-14 13:45:18
 * @LastEditTime: 2021-10-22 10:38:19
 * @Description: 商品列表组件
-->

<template>
  <div class="product-box">
    <!-- 头部区域 -->
    <div class="product-list-header">
      <!-- 引用HeaderNav组件 -->
      <HeaderNav :goTarge="goback" />
      <section class="select-menu">
        <div
          class="select-item"
          v-for="(item, index) in selectList"
          :key="index"
          @click="orderSelect(item.order, index)"
          :class="{ active: index === activeIndex }"
        >
          {{ item.title }}
          <i :class="item.iconClass"></i>
        </div>
      </section>
    </div>
    <section class="product-list">
      <div class="product-container">
        <van-pull-refresh 
          v-model="refreshing" 
          @refresh="onRefresh"
          
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="100"
          >
            <van-card
              v-for="(item, index) in productList"
              :key="index"
              :num="item.stock"
              :price="item.price"
              :desc="item.subtitle"
              :title="item.name"
              :thumb="item.imgUrl"
              :origin-price="item.originalPrice"
              @click="toProductDetail(item.id)"
            />
          </van-list>
        </van-pull-refresh>
      </div>
    </section>
  </div>
</template>

<script>
// 公共组件的引用
import HeaderNav from "@/components/header-nav.vue";
// 导入混入api方法
import { getProductList } from "@/api/product-list.js";

export default {
  name: "ProductList",
  components: {
    HeaderNav,
  },
  data() {
    return {
      selectList: [
        {
          title: "默认排序",
          order: "default",
          iconClass: "",
        },
        {
          title: "升序",
          order: "price_asc",
          iconClass: "iconfont icon-up1",
        },
        {
          title: "降序",
          order: "price_desc",
          iconClass: "iconfont icon-down1",
        },
        {
          title: "筛选",
          order: "",
          iconClass: "iconfont icon-shaixuan",
        },
      ],
      orderBy: 'default',
      pageNum: 1,
      pageSize: 10,
      activeIndex: 0,
      productList: [],
      loading: true,
      finished: false,
      refreshing: false,
    };
  },
  computed: {
    categoryId() {
      return this.$route.params.id;
    },
    params() {
      return {
        categoryId: this.categoryId,
        orderBy: this.orderBy,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
    },
  },
  created() {
    getProductList(this.params, (data) => {
      this.productList = data;
      this.loading = false
    });
  },
  methods: {
    orderSelect(orderBy, index) {
      this.orderBy = orderBy
      // 重新调用上拉刷新
      this.refreshing = true
      this.onRefresh()
      this.activeIndex = index;
    },
    goback() {
      this.$router.go(-1);
    },
    toProductDetail(id) {
      this.$router.push({
        name: "product-detail",
        params: {
          id,
        },
      });
    },
    onLoad() {
      if (this.refreshing) {
        this.productList = [];
        this.refreshing = false;
        this.pageNum = 1;
        getProductList(this.params, (data) => {
          this.productList = data;
          this.loading = false;
        })
        return
      }
      this.pageNum++;
      getProductList(this.params, (data) => {
        if (data.length === 0) {
          this.finished = true
        }
        this.productList = [...this.productList, ...data]
        this.loading = false
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" scoped>
.product-box {
  bottom: 0;
}
// 头部区域演示
.product-list-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;

  .select-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    background: #fff;

    .select-item {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;

      .iconfont {
        &.icon-down1 {
          color: #999;
          padding-left: 10px;
          font-size: 22px;
        }

        &.icon-up1 {
          @extend .icon-down1;
          font-size: 34px;
        }

        &.icon-shaixuan {
          @extend .icon-down1;
          font-size: 28px;
        }
      }

      &.active {
        color: $red;
      }
    }
  }
}
// 商品列表商品区域
.product-list {
  position: absolute;
  top: 220px;
  bottom: 0;
  width: 100%;
  .product-container {
    width: 100%;
    overflow-y: scroll;
    height: 100%;
  }
}
</style>
